<template>
    <view>
        <view class="container flex-column">
            <view class="header">
                <image src="https://hz-xinggc-prod.oss-cn-shenzhen.aliyuncs.com/pic/root/17137510490002YWZK6"
                    mode="heightFix" class="header-image">
                </image>
            </view>
            <view class="middle flex-row">

                <view class="centent-parent flex-column">
                    <u-qrcode siz :size="128" :val="qrcode"></u-qrcode>
                    <view class="middle-leading-text flex-row">
                        使用微信或APP扫码查看人员详情
                    </view>
                </view>

                <view class="middle-trailing flex-column flex-1">
                    <text class="middle-trailing-top-text flex-row">人员码</text>
                    <text class="middle-trailing-text" space="emsp"> {{name}} </text>
                    <text class="middle-trailing-text" space="emsp"> {{profession}} </text>
                    <view class="middle-trailing-text"> 应急电话：18812345678 </view>
                </view>
            </view>

            <view class="seperator"> </view>

            <view class="bottom">
                <image src="https://file.aqszh.com/pic/root/1730343849000biT3Ec" mode="heightFix" class="bottom-image">
                </image>
                <text class="bottom-text">义东高速东阳段土建第01标项目经理部</text>
            </view>
        </view>
    </view>
</template>

<script setup>
    import {
        ref
    } from 'vue';
    const qrcode = ref(
        'https://www.aqszh.com/elec.html#/personnel?SGxGVzRLOFVQMXVZNjZuTGVBTjhoRWdNNWtsRmVmbVoxMHlEQ28wVGZvY2xrR042bWRrQWwwSEdjTVdHZ2kvdQ=='
    )

    const name = ref('姓  名：张某某')
    const profession = ref('工  种：张某某')
</script>

<style lang="scss" scoped>
    .container {
        margin: 20rpx;
        background-color: white;
        // 从上到下(渐变轴为180度)
        background: linear-gradient(#FFFFFF, #008CD6);
    }

    .header {
        background-color: #205ED1;
        height: 47rpx;
        padding: 0 36rpx;
    }

    .header-image {
        height: 100%;
    }

    .middle {
        padding: 8rpx 36rpx 0;
    }

    .middle-leading-text {
        font-size: 12rpx;
        color: #111111;
        font-weight: bold;
        padding: 5rpx 0;
    }

    .middle-trailing {
        margin: 0 30rpx;
    }

    .middle-trailing-top-text {
        font-size: 32rpx;
        color: #d11d2e;
        font-weight: bold;
        justify-content: center;
    }

    .middle-trailing-text {
        margin-top: 30rpx;
        font-size: 22rpx;
        color: #111111;
        font-weight: bold;
        justify-content: center;
    }

    .seperator {
        background-color: white;
        height: 1rpx;
    }

    .bottom {
        display: flex;
        height: 41rpx;
        justify-content: space-between;
        align-items: center;
        padding: 0 36rpx;
    }

    .bottom-image {
        display: flex;
        height: 100%;
    }

    .bottom-text {
        font-size: 16rpx;
        color: #111111;
    }
</style>